<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
        <script src="../../scripts/jquery-1.11.3.min.js"></script>
 		<script src="../../scripts/lib/echarts-2.2.7/esl.js"></script>
        <script src="../../scripts/lib/echarts-2.2.7/echarts.js"></script>
        <link href="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=5FnNQNGWXlHGq9nbLKLLAsdU"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.js"></script>
</head>
<body style="margin:0;">
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:100%;width:100%;"></div>
<!-- ECharts单文件引入 -->
<script type="text/javascript">
// 路径配置
(function () {
    require.config({
        paths: {
            echarts: '../../scripts/lib/echarts-2.2.7'
        },
        packages: [
            {
                name: 'BMap',
                location: '../../scripts/lib/echarts-2.2.7',
                main: 'main'
            }
        ]
    });

    require(
    [
        'echarts',
        'BMap',
        'echarts/chart/map'
    ],
    function (echarts, BMapExtension) {
        var BMapExt = new BMapExtension($('#main')[0], BMap, echarts,{
            enableMapClick: false
        });
        var map = BMapExt.getMap();
        var container = BMapExt.getEchartsContainer();
        var startPoint = {
            x: 104.755756,
            y: 31.467239
        };
        var point = new BMap.Point(startPoint.x, startPoint.y);
        var  mapStyle ={
            styleJson:
[
          {
                    "featureType": "administrative",
                    "elementType": "labels",
                    "stylers": {
                              "visibility": "off"
                    }
          },
          {
                    "featureType": "poi",
                    "elementType": "labels",
                    "stylers": {
                              "visibility": "off"
                    }
          },
          {
                    "featureType": "subway",
                    "elementType": "all",
                    "stylers": {
                              "visibility": "off"
                    }
          },
          {
                    "featureType": "highway",
                    "elementType": "labels",
                    "stylers": {
                              "visibility": "off"
                    }
          },
          {
                    "featureType": "arterial",
                    "elementType": "all",
                    "stylers": {
                              "color": "#f3f3f3"
                    }
          },
          {
                    "featureType": "water",
                    "elementType": "geometry",
                    "stylers": {
                              "color": "#e1eefa"
                    }
          },
          {
                    "featureType": "green",
                    "elementType": "geometry",
                    "stylers": {
                              "color": "#e9f6e4"
                    }
          },
          {
                    "featureType": "land",
                    "elementType": "geometry",
                    "stylers": {
                              "color": "#ffffff"
                    }
          },
          {
                    "featureType": "railway",
                    "elementType": "all",
                    "stylers": {
                              "visibility": "off"
                    }
          },
          {
                    "featureType": "highway",
                    "elementType": "all",
                    "stylers": {
                              "color": "#e5e5e5"
                    }
          }
]
        }
        map.setMapStyle(mapStyle);
        map.centerAndZoom(point, 14);
        map.enableScrollWheelZoom(true);
        map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
        // 地图自定义样式


        option = {
            color: ['gold','aqua','lime'],
            title : {
                //text: '业务态势',
                //subtext:'2016年6月7日 16:36:37',
                x:'center',
                y:50,
                textStyle : {
                    color: '#cc3300'
                }
            },
            tooltip : {
                trigger: 'item',
                formatter: function (v) {
                    return v[1].replace(':', ' > ');
                }
            },
            legend: {
                show:false,
                orient: 'vertical',
                x:'20',
                y:'20',
                data:['公安局'],
                selectedMode: 'single',
                selected:{
/*                    '公安局' : false,
                    '卫生局' : false*/
                },
                textStyle : {
                    color: '#cc3300'
                }
            },
            toolbox: {
                show : false,
                orient : 'vertical',
                x: 'right',
                y: 'center',
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            dataRange: {
                min : 0,
                max : 100,
                range:{start: 60, end: 100},
                x: 'right',
                calculable : true,
                color: ['#ff3333', 'orange','lime'],
                textStyle:{
                    color:'#fff'
                },
               /* calculable : false*/
            },
            series : [
                {
                    name:'公安局',
                    type:'map',
                    mapType: 'none',
                    data:[],
                    geoCoord: {
                        '招商银行(绵阳支行)': [104.753601,31.469609],
                        '中国银行(绵阳分行)': [104.756884,31.465519],
                        '中国工商银行(绵阳涪城支行)': [104.762113,31.463751],
                        '交通银行(绵阳分行)': [104.73594,31.466655],
                        '上海浦东发展银行(绵阳支行)': [104.7368,31.46744],
                        '中国工商银行(荷花支行)': [104.717485,31.462979],
                        '中国人民银行(绵阳市中心支行)': [104.700675,31.481132],
                        '中国工商银行(高新区支行)': [104.685197,31.474506],
                        '中国邮政储蓄银行(长虹大道支行)': [104.74583,31.488672],
                        '中国农业银行(经开区支行)': [104.778083,31.436103],
                        '中国工商银行(绵阳南桥支行)': [104.761308,31.455956],
                        '招商银行(万达广场支行)': [104.728186,31.46077],
                        '中国建设银行(富乐路储蓄所)': [104.749338,31.469101],
                        '中国农业银行(高新区支行)': [104.69965,31.470191],
                        '平安银行(高新区支行)': [104.682888,31.474456],
                        '中国建设银行(高新支行)': [104.686064,31.474277],
                        '中国农业银行(警钟街支行)': [104.757801,31.465047],
                        '中国建设银行(火车客站支行)': [104.724232,31.462814],
                        '中国光大银行(绵阳涪城支行)': [104.745835,31.473362],
                        '中国工商银行(绵阳剑南支行)': [104.751063,31.473473],
                        '中国农业银行(剑南路分理处)': [104.751951,31.473465],
                        '中国工商银行(花园分理处)': [104.731017,31.465108],
                        '中国邮政储蓄银行(南河路支行)': [104.762978,31.458402],
                        '中国建设银行(绵阳市分行)': [104.761146,31.467897],
                        '交通银行(绵阳支行)': [104.698755,31.469857],
                        '中国光大银行(绵阳分行)': [104.730635,31.465008],
                        '中国工商银行(南河分理处)': [104.766756,31.458418],
                        '中国建设银行(建设街所)': [104.766365,31.459003],
                        '中国建设银行(红星街所)': [104.761609,31.458977],
                        '中国银行(绵阳涪城支行)': [104.749568,31.469024],
                        '中国工商银行(高水南街支行)': [104.744507,31.50066],
                        '中国工商银行(绵阳分行营业室)': [104.758629,31.464633],
                        '中国建设银行(科教创业园区支行)': [104.702988,31.487216],
                        '中国建设银行(绵阳园艺支行)': [104.716684,31.492541],
                        '中国农业银行(永兴营业所)': [104.647804,31.466862],
                        '中国工商银行(绵阳临园支行)': [104.750714,31.469599],
                        '华夏银行(绵阳分行)': [104.743606,31.501447],
                        '中国工商银行(游仙支行)': [104.778302,31.47092]
                    },
                    markPoint : {
                        /*symbol:'image://../imgs/atm.png',
                        symbolSize: 32,   'circle' | 'rectangle' | 'triangle' | 'diamond' |'emptyCircle' | 'emptyRectangle' | 'emptyTriangle' | 'emptyDiamond' */
                        symbol:'circle',
                        symbolSize : function (v){
                            return 10+ v/10
                        },
                        effect : {
                            show: true,
                            shadowBlur : 0
                        },

                        itemStyle : {
                           normal:{
                               label: {
                                   show: true,
                                   formatter: function (params,ticket,callback) {//格式化展现（标签+值）
                                    console.log(params.data.name);
                                    //var arrname = params.name.split(":");
                                    return params.data.name;
                                   }
                                }
                            }
                        },

                        data : [
{name:'招商银行(绵阳支行)' ,value:18},
{name:'中国银行(绵阳分行)',value:98},
{name:'中国工商银行(绵阳涪城支行)',value:28},
{name:'交通银行(绵阳分行)',value:78},
{name:'上海浦东发展银行(绵阳支行)',value:38},
{name:'中国工商银行(荷花支行)',value:38},
{name:'中国人民银行(绵阳市中心支行)',value:8},
{name:'中国工商银行(高新区支行)',value:18},
{name:'中国邮政储蓄银行(长虹大道支行)',value:18},
{name:'中国农业银行(经开区支行)',value:28},
{name:'中国工商银行(绵阳南桥支行)',value:38},
{name:'招商银行(万达广场支行)' ,value:28},
{name:'中国建设银行(富乐路储蓄所)',value:68},
{name:'中国农业银行(高新区支行)',value:48},
{name:'平安银行(高新区支行)',value:38},
{name:'中国建设银行(高新支行)',value:28},
{name:'中国农业银行(警钟街支行)',value:18},
{name:'中国建设银行(火车客站支行)',value:88},
{name:'中国光大银行(绵阳涪城支行)',value:28},
{name:'中国工商银行(绵阳剑南支行)',value:38},
{name:'中国农业银行(剑南路分理处)',value:98},
{name:'中国工商银行(花园分理处)',value:28},
{name:'中国邮政储蓄银行(南河路支行)',value:18},
{name:'中国建设银行(绵阳市分行)',value:18},
{name:'交通银行(绵阳支行)',value:88},
{name:'中国光大银行(绵阳分行)',value:28},
{name:'中国工商银行(南河分理处)',value:18},
{name:'中国建设银行(建设街所)',value:18},
{name:'中国建设银行(红星街所)',value:78},
{name:'中国银行(绵阳涪城支行)',value:28},
{name:'中国工商银行(高水南街支行)',value:78},
{name:'中国工商银行(绵阳分行营业室)',value:78},
{name:'中国建设银行(科教创业园区支行)',value:78},
{name:'中国建设银行(绵阳园艺支行)',value:28},
{name:'中国农业银行(永兴营业所)',value:28},
{name:'中国工商银行(绵阳临园支行)',value:78},
{name:'华夏银行(绵阳分行)',value:18},
{name:'中国工商银行(游仙支行)',value:28}
                        ]
                    }
                }
            ]
        };

        var myChart = BMapExt.initECharts(container);
        BMapExt.setOption(option);
		window.onresize = myChart.resize
    }
);
})();

</script>
</body>
</html>

